<template>
  <div class="function-service" ref="funService">
    <div class="service-title">
      <span>常见问题</span>
    </div>
    <div class="service-options">
      <div v-for="(optionsItem,optionsIndex) in options" :key="optionsIndex">{{optionsItem.name}}</div>
    </div>
    <div class="service-list">
      <div v-for="(listItem,listIndex) in list" :key="listIndex">{{listItem.question}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'functionService',
  data() {
    return {
      options: [
        {name: '我要租车'},
        {name: '免押租车'},
        {name: '异地还车'},
        {name: '车辆出险'},
        {name: '车辆故障'},
        {name: '注册认证'},
        {name: '车辆网点'},
        {name: '支付订单'},
        {name: '取车环节'},
        {name: '还车环节'},
        {name: '发票获取'},
        {name: '违章处理'}
      ],
      list: [
        {question: '我想租车，怎么下单？'},
        {question: '可以帮忙下单吗'},
        {question: '我想租车，怎么联系你们？'}
      ]
    }
  },
  mounted() {
    this.getHeight();
  },
  methods: {
    getHeight() {
      this.$refs.funService.style.height =
        document.documentElement.clientHeight + "px";
    }
  }
}
</script>

<style lang="scss" scoped>
.function-service {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  background-color: #fff;
  // 常见问题标题
  .service-title {
    width: 100%;
    height: $height*2;
    line-height: $height*2;
    span {
      font-size: 20px;
      font-weight: 700;
      display: flex;
      align-items: center;
      &::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 20px;
        border-radius: 6px;
        background-color: red;
        color: red;
        margin-right: 5px;
      }
    }
  }
  .service-options {
    width: 100%;
    height: $height*3;
    display: flex;
    flex-flow:  row wrap;
    justify-content: space-between;
    div {
      width: 21%;
      padding: 4px;
      background-color: $bgcolor;
      border-radius: 20px;
      text-align: center;
      color: $color;
      margin-bottom: 8px;
      font-size: 14px;
    }
  }
  .service-list {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    div {
      height: $height;
      line-height: $height;
      border-bottom: 2px solid $bgcolor;
    }
  }
}
</style>